<template>
  <div>
    <div v-if="type === 'select'">
      <van-field
        type="text"
        :value="currentValue ? selectDisplayValue : ''"
        :readonly="readonly"
        :placeholder="placeholder"
        :required="required"
        @click="selectPopupVisible = true"
        :label="label"
        right-icon="arrow"
        input-align="right"
      />
      <van-popup v-model="selectPopupVisible" position="bottom">
        <van-picker
          show-toolbar
          :columns="selectColumns"
          :default-index="selectComponentValue"
          @cancel="selectPopupVisible = false"
          @confirm="onSelectConfirm"
        />
      </van-popup>
    </div>
    <div v-if="type === 'selectArea'">
      <van-field
        type="textarea"
        :value="currentValue ? selectDisplayValue : ''"
        :readonly="readonly"
        :placeholder="placeholder"
        :required="required"
        @click="selectPopupVisible = true"
        :label="label"
        right-icon="arrow"
        input-align="right"
      />
      <van-popup v-model="selectPopupVisible" position="bottom">
        <van-picker
          show-toolbar
          :columns="selectColumns"
          :default-index="selectComponentValue"
          @cancel="selectPopupVisible = false"
          @confirm="onSelectConfirm"
        />
      </van-popup>
    </div>
    <div v-if="type === 'date'">
      <van-field
        :label="label"
        type="text"
        :value="currentValue ? dateDisplayValue : ''"
        :readonly="readonly"
        :placeholder="placeholder"
        :required="required"
        input-align="right"
        @click="datePopupVisible = true"
        :right-icon="rightIcon"
      >
        <template #button v-if="dateBtn">
          <slot></slot>
        </template>
      </van-field>

      <van-popup
        v-model="datePopupVisible"
        position="bottom"
        :lock-scroll="true"
      >
        <van-datetime-picker
          type="date"
          v-model="dateComponentValue"
          :title="placeholder"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="datePopupVisible = false"
          @confirm="onDateConfirm"
        />
      </van-popup>
    </div>
    <div v-if="type === 'year-month'">
      <van-field
        :label="label"
        type="text"
        :value="currentValue ? yearMonthDisplayValue : ''"
        :readonly="readonly"
        :placeholder="placeholder"
        :required="required"
        input-align="right"
        @click="yearMonthPopupVisible = true"
        right-icon="arrow"
      />
      <van-popup
        v-model="yearMonthPopupVisible"
        position="bottom"
        :lock-scroll="true"
      >
        <van-datetime-picker
          type="year-month"
          v-model="yearMonthComponentValue"
          :title="placeholder"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="yearMonthPopupVisible = false"
          @confirm="onYearMonthConfirm"
        />
      </van-popup>
    </div>

    <div v-if="type === 'calendar'">
      <van-field
        :label="label"
        type="text"
        :value="currentValue ? calendarDisplayValue : ''"
        :readonly="readonly"
        :placeholder="placeholder"
        :required="required"
        input-align="right"
        @click="calendarPopupVisible = true"
        right-icon="arrow"
      />
      <van-calendar
        v-model="calendarPopupVisible"
        @confirm="onCalendar"
        color="#4877E3"
        :maxDate="maxDate"
        :minDate="minDate"
        :default-date="calendarComponentValue"
      />
    </div>
  </div>
</template>
<script>
import nus from "@nsrd/nus";

export default {
  props: {
    label: String,
    placeholder: String,
    required: Boolean,
    dateBtn: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: [Boolean, String],
      default: false
    },
    rightIcon: {
      default: function(val) {
        if (val === "1") {
          return "";
        } else {
          return "arrow";
        }
      }
    },
    type: {
      // text textarea number select date（时间戳） action
      type: String,
      default: "text"
    },
    value: [String, Number, Date],
    // select
    selectColumns: Array,
    // date
    maxDate: {
      type: Date,
      default: () => new Date()
    },
    minDate: {
      type: Date,
      default: () => new Date(1900, 0, 1)
    },
    defaultDate: {
      type: Date,
      default: () => new Date()
    }
  },
  watch: {
    value: {
      handler: function(val) {
        if (this.type === "select" || this.type === "selectArea") {
          let selectIndex = this.selectColumns.findIndex(i => {
            if (i.id === val) {
              return true;
            }
          });
          if (selectIndex > -1) {
            this.currentValue = val;
            this.selectDisplayValue = this.selectColumns[selectIndex].text;
            this.selectComponentValue = selectIndex;
          } else {
            this.currentValue = val;
            this.selectDisplayValue = val;
            this.selectComponentValue = 0;
          }
        }
        if (this.type === "date") {
          this.currentValue = val;
          this.dateComponentValue = nus.date.format(val, "YYYYMMDD").toDate(); // moment(val, "YYYYMMDD").toDate();
          this.dateDisplayValue = nus.date.format(val, "YYYY-MM-DD"); // moment(val).format("YYYY-MM-DD");
        }
        if (this.type === "year-month") {
          this.currentValue = val;
          this.yearMonthComponentValue = nus.date
            .format(val, "YYYYMM")
            .toDate(); // moment(val, "YYYYMM").toDate();
          this.yearMonthDisplayValue = nus.date.format(val, "YYYY-MM"); // moment(val).format("YYYY-MM");
        }
        if (this.type === "calendar") {
          this.log(val);
          this.currentValue = val;
          this.calendarComponentValue = nus.date
            .format(val, "YYYYMMDD")
            .toDate(); // moment(val, "YYYYMMDD").toDate();
          this.calendarDisplayValue = nus.date.format(val, "YYYY-MM-DD"); // moment(val).format("YYYY-MM-DD");
        }
      },
      immediate: true
    },
    currentValue: {
      handler: function(value) {
        this.$emit("input", value);
      },
      immediate: true
    }
  },
  data() {
    return {
      // 实际值
      currentValue: this.value,
      // 下拉选择
      selectDisplayValue: "", // 展示值
      selectComponentValue: 0, // 组件值
      selectPopupVisible: false,
      // 日期选择
      dateDisplayValue: "", // 展示值
      dateComponentValue: this.defaultDate, // 组件值
      datePopupVisible: false,

      yearMonthDisplayValue: "", // 展示值
      yearMonthComponentValue: this.defaultDate, // 组件值
      yearMonthPopupVisible: false,

      calendarDisplayValue: "", // 展示值
      calendarComponentValue: this.defaultDate, // 组件值
      calendarPopupVisible: false
    };
  },
  mounted() {
    this.dateComponentValue = this.defaultDate || new Date();
    this.yearMonthComponentValue = this.defaultDate || new Date();
    this.calendarComponentValue = this.defaultDate || new Date();
  },
  methods: {
    onSelectConfirm(value) {
      this.currentValue = value.id;
      this.selectPopupVisible = false;
    },
    onDateConfirm(val) {
      this.currentValue = nus.date.format(val, "YYYYMMDD"); // moment(value).format("YYYYMMDD");
      this.datePopupVisible = false;
    },
    onYearMonthConfirm(val) {
      this.currentValue = nus.date.format(val, "YYYYMM"); // moment(value).format("YYYYMM");
      this.yearMonthPopupVisible = false;
    },
    onCalendar(val) {
      this.currentValue = nus.date.format(val, "YYYYMMDD"); // moment(value).format("YYYYMMDD");
      this.calendarPopupVisible = false;
    }
  }
};
</script>
<style lang="less" scoped></style>
